<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
    <ng-template ngSwitchCase="list">
        <test-modal #viewModal titleName='Variable Catalog'></test-modal>
        <test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this variable will affect the following components','Deleting this variable will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
        [showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteVarCatalog($event)">
    </test-modal>
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
</ng-template>
<ng-template ngSwitchDefault>
    <form [formGroup]="varcatalogForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveVarCatalog() : updateVarCatalog()">
      <ng-container>
        <div class="row well well-sm">
          <h4 style="display:inline">
          <i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
        </h4>
        <div class="pull-right" style="margin-right: 20px">
          <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!varcatalogForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
          <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!varcatalogForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
          <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
        </div>
      </div>
    </ng-container>
    <div class="form-fixed-height">
        <div class="well well-sm">
          <span class="editsection">
            Variable Settings
          </span>
          <div class="form-group" style="margin-top: 25px">
            <label class="control-label col-sm-2" for="ID">ID</label>
            <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Text String that uniquely identify the variable"></i>
            <div class="col-sm-9">
                <input formControlName="ID" id="ID" [ngModel]="varcatalogForm.value.ID" />
                <control-messages [control]="varcatalogForm.controls.ID"></control-messages>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="Type">Type</label>
            <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The type of the variable"></i>
            <div class="col-sm-9">
                <select formControlName="Type" id="Type" [ngModel]="varcatalogForm.value.Type">
                    <option value="string">String</option>
                    <option value="integer">Integer</option>
                    <option value="boolean">Boolean</option>
                    <option value="float">Floating point</option>
                </select>
                <control-messages [control]="varcatalogForm.controls.Type"></control-messages>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="Value">Default Value</label>
            <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="The default value if not redefined elsewhere"></i>
            <div class="col-sm-9">
                <input formControlName="Value" id="Value" [ngModel]="varcatalogForm.value.Value" />
                <control-messages [control]="varcatalogForm.controls.Value"></control-messages>
            </div>
        </div>
    </div>
        <div class="well well-sm">
          <span class="editsection">
            Extra Settings
          </span>
          <div class="form-group" style="margin-top: 25px">            <label class="control-label col-sm-2" for="Description">Description</label>
            <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Some useful description to administrators"></i>
            <div class="col-sm-9">
                <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="varcatalogForm.value.Description"> </textarea>
                <control-messages [control]="varcatalogForm.controls.Description"></control-messages>
            </div>
        </div>
    </div>
    </div>
    </form>
</ng-template>
</ng-container>
